<template>
  <div>
    <el-container>
      <el-header class="header">
        <div class="sys-title">星际迷宠后台管理系统</div>
        <div class="user-box">
          <img
            class="head-img"
            src="http://wx2.sinaimg.cn/large/ceeb653ely1g25t6pt2upg208w08p1kz.gif"
            alt="头像"
          />
          <span class="user-name">艺术家</span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="auto" style="height: calc(100vh - 80px);">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu default-active="/activity" router class="el-menu-vertical-demo">
                <el-menu-item index="/activity">
                  <i class="el-icon-menu"></i>
                  <span slot="title">活动管理</span>
                </el-menu-item>
                <el-menu-item index="/swiper">
                  <i class="el-icon-menu"></i>
                  <span slot="title">轮播管理</span>
                </el-menu-item>
                <el-menu-item index="/pet">
                  <i class="el-icon-menu"></i>
                  <span slot="title">宠物管理</span>
                </el-menu-item>
                <el-menu-item index="/dictionary">
                  <i class="el-icon-menu"></i>
                  <span slot="title">字典管理</span>
                </el-menu-item>
                <el-menu-item index="/article">
                  <i class="el-icon-menu"></i>
                  <span slot="title">文章管理</span>
                </el-menu-item>
                <el-menu-item index="/user">
                  <i class="el-icon-menu"></i>
                  <span slot="title">用户管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      isCollapse: true
    };
  },
  methods: {
    goDefault() {
      this.$router.push("/activity");
    }
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // }
  },
  mounted() {
    this.goDefault();
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: calc(100vh - 80px);
}
.header {
  height: 80px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #409eff;
}
.head-img {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;

  width: 50px;
  height: 50px;
}
.sys-title {
  font-size: 25px;
  font-weight: bolder;
  color: white;
}
.user-box {
  display: flex;
  align-items: center;
  margin-right: 5%;
  cursor: pointer;
}
.user-name {
  color: white;
  font-size: 14px;
  margin-left: 10px;
}
.tac {
  width: 100%;
  height: 100%;
}
</style>
